import { DEFAULT_PROTABLE_OPTIONS } from '@/constants';
import { fileListService } from '@/services/fileApi';
import {
  CheckCircleOutlined,
  CloseCircleOutlined,
  DownloadOutlined,
  PlusCircleOutlined,
  SyncOutlined,
  VerticalAlignBottomOutlined,
} from '@ant-design/icons';
import { ActionType, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components';
import { useRequest } from '@umijs/max';
import { Button, Tag, Tooltip } from 'antd';
import dayjs from 'dayjs';
import { useMemo, useRef, useState } from 'react';
import CategoryEditDrawer from './components/EditDrawer';

/**
 * 教师导出列表
 */
export default function ProductListPage() {
  const [openEditDrawer, setOpenEditDrawer] = useState(false);
  const [editRecord, setEditRecord] = useState<string | number>('');
  const tableActionRef = useRef<ActionType | null>();

  // 列表接口
  const requestRemove = useRequest(fileListService, {
    manual: true, // 关闭自动请求
    onSuccess: () => {
      // 重新加载表格
      tableActionRef.current?.reload();
    },
  });

  const columns = useMemo<ProColumns[]>(
    () => [
      {
        dataIndex: 'id',
        title: '序号',
        width: 100,
      },
      {
        dataIndex: 'fileName',
        title: '文件名',
        hideInSearch: true,
      },
      {
        dataIndex: 'uploadName',
        title: '导出人员',
        hideInSearch: true,
      },
      {
        dataIndex: 'status',
        title: '状态',
        renderText: (val) => {
          if (val === '导出中...') {
            return (
              <Tag icon={<SyncOutlined spin />} color="processing">
                导出中...
              </Tag>
            );
          } else if (val === '导出完成...') {
            return (
              <Tag icon={<CheckCircleOutlined />} color="success">
                导出完成...
              </Tag>
            );
          } else {
            return (
              <Tag icon={<CloseCircleOutlined />} color="error">
                导出失败...
              </Tag>
            );
          }
        },
      },
      {
        dataIndex: 'created_at',
        title: '创建时间',
        hideInSearch: true,
        renderText: (val) => dayjs(val).format('YYYY-MM-DD HH:mm:ss'),
      },
      {
        dataIndex: 'createTime',
        title: '创建时间',
        hideInTable: true,
        valueType: 'dateRange',
        search: {
          // 转换一下时间范围的字段，也可以用dayjs格式化日期
          transform: (value) => {
            return {
              startDate: value[0],
              endDate: value[1],
            };
          },
        },
      },
      {
        title: '操作',
        valueType: 'option',
        width: 90,
        fixed: 'right',
        render: (_, row) => [
          <Tooltip key="edit" title="下载">
            <a
              href={`//gameback.cn/export/${row.fileName}`}
              target="_blank"
              rel="noopener noreferrer"
            >
              <Button type="text" icon={<VerticalAlignBottomOutlined />}></Button>
            </a>
          </Tooltip>,
        ],
      },
    ],
    [requestRemove.loading],
  );

  return (
    <PageContainer title="导出记录">
      <ProTable
        {...DEFAULT_PROTABLE_OPTIONS}
        actionRef={tableActionRef}
        columns={columns}
        request={async (params) => {
          const res = await fileListService();

          return {
            data: res,
            success: true,
            total: res.length,
          };
        }}
        scroll={{ x: 'max-content' }}
        toolbar={{
          actions: [
            <Button
              key="add"
              type="primary"
              icon={<PlusCircleOutlined />}
              onClick={() => setOpenEditDrawer(true)}
            >
              新增
            </Button>,
            <Button key="export" type="dashed" icon={<DownloadOutlined />}>
              导出
            </Button>,
          ],
        }}
      ></ProTable>
      <CategoryEditDrawer
        open={openEditDrawer}
        data={editRecord}
        onFinish={() => {
          setOpenEditDrawer(false);
          setEditRecord('');
        }}
      />
    </PageContainer>
  );
}
